(function () {
  class TyphoonPointLayer extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 0
      this.maxZoom = 21
      this.name =  'TyphoonPointLayer'
      this.initLayer({
        type: 'circle',
        paint: {
          'circle-color': ['get', 'color'],
          'circle-radius': 5,
        }
      })
    }

    /**
     *
     * @param featrue 当前点击的feature
     * @param data 当前点击的feature data
     * @returns {string}
     */
    setTipHtml(featrue, data) {
      setTimeout(_ => {
        document.querySelector('.self_point_container .close').onclick = _ => {
          window.popup.remove()
          window.popup = null
        }
      }, 3000)
      return `
        <div class="self_point_container"> 
             <div class="close">x</div>
             <div class="item">
                <span>监测时间：</span>
                <span>${data.time ? moment(data.time).format('YYYY-MM-DD HH:mm:ss') : ''}</span>
            </div>
            <div class="item">
                <span>名称：</span>
                <span>${data.typhoonName}</span>
            </div>
             <div class="item">
                <span>移动方向：</span>
                <span>${data.move_dir}</span>
            </div>
             <div class="item">
                <span>风速：</span>
                <span>${data.speed}</span>
            </div>
             <div class="item">
                <span>等级：</span>
                <span>${data.strong}</span>
            </div>
        </div>
      `
    }

    getColor(item) {
      item.strong = item.strong || ''
      if (item.strong.includes('热带低压')) {
        return '#00FFFF' // 青色
      } else if (item.strong.includes('热带风暴')) {
        return '#00FF00' // 绿色
      } else if (item.strong.includes('强热带风暴')) {
        return '#FFFF00' // 黄色
      } else if (item.strong.includes('台风')) {
        return '#FFA500' // 橙色
      } else if (item.strong.includes('强台风')) {
        return '#FF0000' // 红色
      } else if (item.strong.includes('超强台风')) {
        return '#800080' // 紫色
      }
      return '#fff' // 默认颜色
    }

    getStyle(item) {
      item.color = this.getColor(item)
      return item
    }

    makeFeature(item) {
      item = this.getStyle(item)
      let f = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [item.lng, item.lat]
        },
        properties: {
          icon: item.icon,
          data: item,
          ...item
        }
      }
      return f
    }

    loadData(data) {
      if (!data) return
      this.cacheData = this.cacheData.concat(data)
      this.refreshLayer()
    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    new TyphoonPointLayer({
      name: 'TyphoonPointLayer'
    })
  })
})();
